<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目社区</title>

    <style>

        #logo {
            margin: auto;
        }
        #nav li {
            list-style: none;
            display: inline;
            margin-bottom: 0%;
        }
        #nav {
            margin: auto;
            float: right;
            margin-bottom: 0%;
            height: 50px;
            line-height: 50px;
        }
        #header {
            margin: 50px;
            margin-top: 0%;
            margin-bottom: 0%;
            width: auto;
        
        }
        #content {
            margin: 50px;
            margin-top: 0%;
            width: auto;
        }
        a:link, a:visited {
            text-decoration: none;
            color: black;
            font-size: 20px;
            margin: auto;
        }
        a:active, a:hover {
            text-decoration: underline;
            color: white;
            font-size: 20px;
            margin: auto;
        }
        #title {
            text-align: center;
            font-size: 30px;
            margin: auto;
            font-weight: bold;
        }

        #content .bar {
            margin: 1%;
            float: left;
        }

        #leftbar {
            width: 18%;
        }

        #centerbar {
            width: 48%;
            height: 1000px;
        }

        #rightbar {
            width: 28%;
            height: 500px;
        }

        #content .island {
            background-color: white;
            height: auto;
            border: 1px;
            margin: 10px;
            padding: 10px;
            border-radius: 7px;
        }
        
        #profile {
            margin-left: 10px;
            margin-right: 10px;
            float: left;
        }

        #name {
            height: 50px;
            line-height: 50px;
            float: left;
        }

        #focus {
            clear: both;
        }

        #datas {
            clear: both;
        }

        .data {
            width: 33%;
            text-align: center;
            float: left;
        }

        .end {
            clear: both;
        }

        body {
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
        }
    </style>
</head>
<body background="sea.jpg">
    <div id="header">
        <img id="logo" src="logo.svg" alt="LOGO" width="100" height="50">
        <div id="nav">
            <li><a href="homepage.html">首页</a>
            <li><a href="community.html">社群</a>
            <li><a href="market.html">市集</a>
            <li><a href="personalpage.html">我的</a>
        </div>
    </div>
    
    <div id="content">
        <div id="leftbar" class="bar">
            <div id="info" class="island">
                
                <div id="info">
                    <img id="profile" src="profile.webp" alt="PROFILE" width="50" height="50">
                    <div id="name">RayOvO</div>

                    <div id="datas">
                        <div class="data">关注</div>
                        <div class="data">粉丝</div>
                        <div class="data">获赞</div>
                        <br>
                        <div class="data">147</div>
                        <div class="data">62</div>
                        <div class="data">13.6k</div>
                        <div class="end"></div>
                    </div>
                </div>
                
            </div>
            <div id="focus" class="island">
                <p>关注列表</p>
            </div>
        </div>
        <div id="centerbar" class="bar">
            <div id="updates" class="island">
                动态信息
            </div>
        </div>
        <div id="rightbar" class="bar">
            <div id="topics" class="island">
                热议话题
            </div>
        </div>
    </div>
</body>
</html>